<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import {
  listSampleType,
  deleteSampleType, type TableSampleClassQuery, type TableSampleDto
} from '@/apis/sample/class'
import SampleClassFrom from "@/views/sample/class/from/index.vue"
import {Message, Modal} from '@arco-design/web-vue'
import type {Ref} from "vue-demi";
import {useUserStore} from "@/stores";

const users = useUserStore().userInfo

// 查询参数
const query:TableSampleClassQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  id: undefined,
  sampleClassName: '',
  status: undefined
})



const dto:Ref<TableSampleDto> = ref({
  id: 0,
  sampleClassName: '',
  status: 1,
  updateBy: users.id
})

// 表格数据
const tableData = ref<any[]>([])
const loading = ref(false)

// 加载数据
const loadData = async () => {
  loading.value = true
  try {
    const { data } = await listSampleType(query)
    tableData.value = data.data.records
  } finally {
    loading.value = false
  }
}

// 初始化加载
onMounted(() => {
  loadData()
})

// 弹窗控制
const visible = ref(false)


// 打开编辑弹窗
const handleEdit = (record: any) => {
  Object.assign(dto.value, record)
  visible.value = true
}


// 删除操作
const handleDelete = async (id: number) => {
  Modal.confirm({
    title: '确认删除',
    content: '确定要删除该样片类型吗？',
    async onOk() {
      await deleteSampleType(id)
      Message.success('删除成功')
      loadData()
    }
  })
}




</script>

<template>
  <div class="sample-type-page">
    <!-- 查询条件 -->
    <a-card class="query-card">
      <a-space :size="18">
        <a-input v-model="query.id" placeholder="类型编号" />
        <a-input v-model="query.sampleClassName" placeholder="类型名称" />
        <a-select v-model="query.status" placeholder="状态" allow-clear>
          <a-option :value="1">启用</a-option>
          <a-option :value="0">停用</a-option>
        </a-select>
        <a-button type="primary" @click="loadData">查询</a-button>
      </a-space>
    </a-card>

    <!-- 操作按钮 -->
    <a-space class="action-bar">
      <a-button type="primary" @click="visible = true">新增类型</a-button>
    </a-space>

    <!-- 数据表格 -->
    <a-table
        :pagination="false"
        :data="tableData"
        :loading="loading"
    >
      <template #columns>
        <a-table-column title="编号" data-index="id" />
        <a-table-column title="类型名称" data-index="sampleClassName" />
        <a-table-column title="上传者" data-index="updateBy" />
        <a-table-column title="上传时间" data-index="updateTime" />
        <a-table-column title="状态" >
          <template #cell="{ record }">
            <a-tag v-if="record.status === 1" color="green">启用</a-tag>
            <a-tag v-else color="red">停用</a-tag>
          </template>
        </a-table-column>
        <a-table-column title="操作" >
          <template #cell="{ record }">
            <a-button type="text" @click="handleEdit(record)">编辑</a-button>
            <a-button type="text" status="danger" @click="handleDelete(record.id)">
              删除
            </a-button>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <!-- 新增/编辑弹窗 -->
    <SampleClassFrom v-model:visible="visible" v-model:form-data="dto"
      @add="loadData" @edit="loadData"
    />
  </div>
</template>

<style scoped lang="scss">
.sample-type-page {
  padding: 16px;

  .query-card {
    margin-bottom: 16px;

    :deep(.arco-card-body) {
      padding: 16px;
    }
  }

  .action-bar {
    margin-bottom: 16px;
  }
}
</style>